<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" id="txt"> <button id="btn">搜索</button>
  <ul id="show">

  </ul>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>

    $("#btn").click(function () {



      $.ajax({
        url: "http://127.0.0.8:8888/users/search",//地址
        type: "post", //请求方式
        headers: { //请求头 和提前发送的键值对
          "token": "123"
        },
        beforeSend: function () { //ajax发送之前执行的函数
          alert("准备发送请求了")
        },
        cache: true,//当前请求是否缓存 
        timeout: 8000,//设置请求超时时间
        data: {
          searchText: $("#txt").val()
        },//发送的数据
        async: true,//同步或异步
        dataType: "json",//预期返回的数据类型  json xml text jsonp script   
        success: function (res) {
          // res  返回的数据
          console.log(res)
          var str = ``;
          $.each(res, function (index, ele) {
            str += `<li>
                  <span>${ele.pname}</span>-----------  <span>${ele.price}</span>
              </li>`
          })
          $("#show").html(str)
        },
        error: function (err) {  //失败的回调
          console.log(err)
        },
        complete: function () { //总是执行的回调
          // alert("你的操作成功了")
        }
      })
    })
    //







  </script>
</body>

</html>